---
title: Edit History
icon: '#pro/History'
---

<MetaData
  lang="en-US"
  isPro
  meta={{
    preset: [{
      client: '@univerjs/preset-docs-collaboration',
      locale: '@univerjs/preset-docs-collaboration/locales/en-US',
      style: '@univerjs/preset-docs-collaboration/lib/index.css',
    }],
    plugins: [{
      client: '@univerjs-pro/edit-history-loader',
    }, {
      client: '@univerjs-pro/edit-history-viewer',
      facade: '@univerjs-pro/edit-history-viewer/locale/en-US',
      style: '@univerjs-pro/edit-history-viewer/lib/index.css',
    }],
    server: 'Yes',
  }}
/>

<Callout type="warning" title="Caution">
  The edit history functionality requires support from the Univer server. Please ensure that you have correctly installed and configured the Univer server. For details, please refer to: [Upgrading to Pro](/guides/pro)
</Callout>

Edit History allows users to view and restore historical versions of documents, supporting various filtering and searching methods to help users efficiently manage document content.

<Callout type="warning" title="Caution">
  The Edit History feature creates an independent Univer instance to handle the loading and display of historical records. If you need to operate or configure the Univer instance for historical records (such as modifying interface request headers, registering plugins, etc.), please refer to the section [Getting the Univer Instance for Edit History](#get-edit-history-univer-instance).
</Callout>

## Preset Mode

### Installation

<Callout>
  The `UniverSheetsAdvancedPreset` preset from `@univerjs/preset-sheets-advanced` depends on the `UniverSheetsDrawingPreset` preset at runtime. Please install `@univerjs/preset-sheets-drawing` first.
</Callout>

```package-install
npm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced
```

### Usage

```typescript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced' // [!code ++]
import UniverPresetSheetsAdvancedEnUS from '@univerjs/preset-sheets-advanced/locales/en-US' // [!code ++]
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing' // [!code ++]
import UniverPresetSheetsDrawingEnUS from '@univerjs/preset-sheets-drawing/locales/en-US' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-drawing/lib/index.css' // [!code ++]
import '@univerjs/preset-sheets-advanced/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsDrawingEnUS, // [!code ++]
      UniverPresetSheetsAdvancedEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsDrawingPreset(), // [!code ++]
    UniverSheetsAdvancedPreset({ // [!code ++]
      universerEndpoint: 'http://localhost:3010', // [!code ++]
    }), // [!code ++]
  ],
})
```

If you have a commercial license for Univer, please refer to [Using License in Client](/guides/pro/license#in-preset-mode) for configuration.

### Presets and Configuration

The `UniverSheetsAdvancedPreset` configuration options:

```typescript
interface IUniverSheetsAdvancedPresetConfig {
  // The endpoint of the Univer Server
  universerEndpoint?: string
}
```

## Plugin Mode

### Installation

```package-install
npm install @univerjs-pro/edit-history-viewer @univerjs-pro/edit-history-loader
```

### Usage

```typescript
import { UniverEditHistoryLoaderPlugin } from '@univerjs-pro/edit-history-loader' // [!code ++]
import EditHistoryViewerEnUS from '@univerjs-pro/edit-history-viewer/locale/en-US' // [!code ++]
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'

import '@univerjs-pro/edit-history-viewer/lib/index.css' // [!code ++]

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      EditHistoryViewerEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverEditHistoryLoaderPlugin, { // [!code ++]
  univerContainerId: 'your-univer-container-id', // [!code ++]
}) // [!code ++]
```

If you have a commercial license for Univer, please refer to [Using License in Client](/guides/pro/license#in-plugin-mode) for configuration.

### Plugins and Configuration

The `UniverEditHistoryLoaderPlugin` configuration options:

```typescript
interface IUniverEditHistoryLoaderConfig {
  univerContainerId?: string
  // The server url of the history list
  historyListServerUrl?: string
}
```

When enabling edit history, the `UniverEditHistoryLoaderPlugin` will load a new Univer instance and mount it on the specified DOM node. Therefore, when registering, you need to provide a suitable DOM node id (such as the original Univer instance's container) to achieve the purpose of the history panel covering the original Univer panel. If the node id is not specified, it defaults to `univer-container`.

If you need to modify the server address for the history list, you can set it through the `historyListServerUrl` configuration option, which defaults to `/universer-api/history`.

## Getting the Univer Instance for Edit History [#get-edit-history-univer-instance]

<Callout title="Good to Know">
  The Univer instance for edit history is created only when the history panel is opened for the first time.
</Callout>

If you need to operate or configure the Univer instance for edit history (such as modifying interface request headers, registering plugins, etc.), you can obtain the instance through `HistoryLoaderService`.

<Tabs items={['Preset Mode', 'Plugin Mode']}>
  <Tab>
    ```typescript
    import { HistoryLoaderService } from '@univerjs/preset-sheets-collaboration'

    const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, ({ stage }) => {
      if (stage === univerAPI.Enum.LifecycleStages.Steady) {
        const injector = univer.__getInjector()
        const historyLoaderService = injector.get(HistoryLoaderService)

        historyLoaderService.historyUniver$.subscribe((historyUniver) => {
          // 在这里可以使用 historyUniver 实例进行操作
        })
      }
    })

    // Remove the event listener using `disposable.dispose()`
    ```
  </Tab>
  <Tab>
    ```typescript
    import { HistoryLoaderService } from '@univerjs-pro/edit-history-loader'

    const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, ({ stage }) => {
      if (stage === univerAPI.Enum.LifecycleStages.Steady) {
        const injector = univer.__getInjector()
        const historyLoaderService = injector.get(HistoryLoaderService)

        historyLoaderService.historyUniver$.subscribe((historyUniver) => {
          if (!historyUniver) return

          // You can perform operations on the historyUniver instance here
        })
      }
    })

    // Remove the event listener using `disposable.dispose()`
    ```
  </Tab>
</Tabs>

### Third-Party Plugin Adaptation

The Univer instance for edit history will only load official plugins by default. Third-party Feature Plugins developed for business needs need to be registered with the `HistoryLoaderService` to be displayed correctly in the history.

```typescript
const injector = univer.__getInjector()
const historyLoaderService = injector.get(HistoryLoaderService)

// [!code focus:4]
// The registration method is the same as that of PluginService. The Univer instance for edit history will register the corresponding plugins according to the following configuration after creation.
historyLoaderService.registerPlugin(YourPlugin, YourPluginConfig)
// Configure the officially registered plugin, set the true parameter to indicate that the original configuration should be overridden
historyLoaderService.registerPlugin(ExamplePlugin, ExamplePluginConfig, true)
```
